<html>
<head>

<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript" src="jquery-ui.js"></script>
<meta charset="utf-8">
	
<style>
	.redfill { background-color: red; }
	.red { color: red; }
	#parent { width: 201px; height: 201px; border: 1px solid; padding: 0px;}
	#handle { width: 31px; height: 31px; border: 1px solid; margin: 0 0 0 0;}
</style>

<script>
  var myInterval;
  var count = 0;
  $(document).ready(function(){
    $( "#handle" ).draggable({ 
	containment: "parent", 
	cursor: "move",
	cursorAt: {top: 16, left: 16},
	revert: true,
	revertDuration: 1,
	start: function() {
		$(this).addClass("redfill");
		myInterval = window.setInterval(function() {
			$("#joytop").text($("#handle").position().top);
			$("#joyleft").text($("#handle").position().left);
			count = count + 1;
			if ((count % 2) == 0) {
				$("#joytop").addClass("red");
			} else {
				$("#joytop").removeClass("red");
			}
				
		},200);
	},
	drag: function() {
		// $("#joyleft").text($("#handle").position().left);
		// $("#joytop").text($("#handle").position().top);
	},
	stop: function() {
		$(this).removeClass("redfill");
		clearInterval(myInterval);
	}
    });
    $( "#handle" ).position({
	of: $("#parent"), 
	my: "center center", 
	at: "center center"
    });
  });
</script>


<div id="parent" class="draggable ui-widget-content">
	<p id="handle" class="ui-widget-header"></p>
</div>

<p id="joyleft">foo</p>
<p id="joytop">bar</p>


</body>
</html>

